<template>
  <div class="page">
    <div class="headers">
      <div class="content-img">
        <div>
          <span class="headers-text">02:09:35:30后作废</span>
        </div>
      </div>
    </div>
    <div class="header" :class="isScroll ? 'scroll' : ''">
      <div class="header-wrap">
        <span id="select" class="avater" @click="handRecommend">推荐</span>
        <span class="header-segmentation">/</span>
        <span id="select" @click="handUpdata">上新</span>
      </div>
      <div class="header-wrap">
        <span id="select" @click="handPrice">价格</span>
        <span class="header-segmentation">/</span>
        <span id="select" @click="handDiscounts">优惠</span>
      </div>
    </div>
    <div class="content" v-for="(data,index) in list" :key="index">
      <img src="@/assets/images/posters.jpg" alt />
      <div class="content-flex">
        <div class="content-top">
          <div class="content-name">新国际4孔插线板</div>
          <div class="content-wrap">
            <!-- <div class="handpick">精选</div> -->
            <div class="handpick-font">NOATEK制造商</div>
            <div class="plan">
              <div class="plan-wrap">
                <div class="plan-back"></div>
              </div>
              <span>已售出50%</span>
            </div>
          </div>
        </div>
        <div class="content-bottom">
          <div class="content-left">
            <span class="original">
              直买价:￥
              <span class="price">45</span>
            </span>
          </div>
          <div class="frame-flex">
            <!-- <div class="frame">
              <span>特权金在减2元</span>
              <div class="triangle"></div>
            </div>-->
            <div class="content-but">
              <span>最高可返 ￥40</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{}, {}, {}, {}, {}],
      isScroll: false,
      top: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll(e) {
        const top = document.querySelector(".header").offsetTop;
        let scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
        if (!this.isScroll) {
            this.top = top;
        }
        if (scrollTop > this.top) {
            this.isScroll = true;
        }
        if (scrollTop < this.top) {
            this.isScroll = false;
        }
    },
    /**
     * 删除class元素
     */
    removeClass() {
      document.querySelectorAll("#select").forEach(item => {
        item.classList.remove("avater");
      });
    },
    /**
     * 推荐
     */
    handRecommend(e) {
      this.removeClass();
      e.target.classList.add("avater");
    },
    /**
     * 上新
     */
    handUpdata(e) {
      this.removeClass();
      e.target.classList.add("avater");
    },
    /**
     * 价格
     */
    handPrice(e) {
      this.removeClass();
      e.target.classList.add("avater");
    },
    /**
     * 优惠
     */
    handDiscounts(e) {
      this.removeClass();
      e.target.classList.add("avater");
    }
  }
};
</script>

<style scoped>
.page {
  min-height: 100vh;
}
.headers {
  width: 90%;
  margin: 10px auto;
  height: auto;
}
.headers-wrap {
  display: flex;
  justify-content: space-between;
}

.img {
  width: 48%;
  height: 50px;
  background: url("../../assets/images/1-2.png") no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
}

.img-wrap {
  background: url("../../assets/images/1-1.png") no-repeat;
  background-size: 100%;
}

.img div {
  color: rgb(255, 232, 212);
  margin-left: 10px;
}

.img-price {
  position: absolute;
  left: 34px;
  font-size: 30px;
  color: #fff;
  top: calc(50% + 3px);
  transform: translateY(-50%);
}

.img-font {
  position: absolute;
  color: rgb(255, 234, 242);
  left: 86px;
  top: 7px;
  font-size: 14px;
}

.img-time {
  position: absolute;
  color: rgb(255, 234, 242);
  left: 86px;
  top: 25px;
  font-size: 12px;
}

.img-text {
  width: 120px;
  top: 42px;
}

.content-img {
  width: 100%;
  height: 90px;
  background: url("../../assets/images/1.2.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.headers-text {
  position: absolute;
  right: 10px;
  top: 5px;
  color: rgb(248, 240, 244);
  font-size: 12px;
}

.header {
  border-bottom: 1px solid rgb(234, 234, 234);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 7vh;
  background: #fff;
  
}

.scroll {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
}

.header-segmentation {
  margin: 0 5px;
}

.avater {
  color: rgb(111, 61, 115);
}
.img-price {
  position: absolute;
  left: 34px;
  font-size: 30px;
  color: #fff;
  top: calc(50% + 3px);
  transform: translateY(-50%);
}

.img-font {
  position: absolute;
  color: rgb(255, 234, 242);
  left: 86px;
  top: 7px;
  font-size: 14px;
}

.img-time {
  position: absolute;
  color: rgb(255, 234, 242);
  left: 86px;
  top: 25px;
  font-size: 12px;
}

.img-text {
  width: 120px;
  top: 42px;
}

.header {
  width: 100%;
  background: #fff;
  height: 7vh;
}

.header-wrapper {
  display: flex;
  width: 95%;
  margin: 0 auto;
  /* justify-content: space-between; */
  align-items: center;
  height: 100%;
  color: rgb(88, 88, 88);
  overflow-x: auto;
}

.header-wrap {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 60px;
  margin-right: 5px;
  justify-content: center;
}

/* .active::after {
        content: "";
        width: 100%;
        height: 2px;
        background: rgb(121,64,137);
        position: absolute;
        bottom: 0;
        left: 0px;
    }

    .active {
        color: rgb(121,64,137);
    } */

.con {
  padding: 10px;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  min-height: 68vh;
}

.con-wrap {
  position: absolute;
  top: 0;
  transition: all 0.5s;
  width: 100%;
}

.con-wrapper {
  position: relative;
  width: 100%;
  transition: all 0.3s;
  padding: 10px;
}

.content {
  width: 100%;
  margin: 0 auto;
  height: auto;
  background: #fff;
  border-radius: 6px;
  /* margin-top: -50px; */
  /* padding: 10px; */
  margin-bottom: 10px;
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  /* color: rgb(161,161,161); */
  border-bottom: 1px solid rgb(244, 244, 244);
  padding: 10px;
  padding-bottom: 20px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.content-price {
  font-weight: 700;
}

.content-info {
  font-size: 12px;
  color: rgb(161, 161, 161);
}

.content-wrap {
  margin-top: 0;
}

.content-position {
  width: 100%;
  height: 80px;
  position: relative;
}

.content img {
  width: 40%;
  height: 140px;
  margin-right: 5px;
}

.content-wrapper {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.content-wrapper p {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.content-con {
  border: 1px solid #ffffff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 2px 5px;
  font-size: 12px;
  font-weight: 700;
}
.img-price {
  position: absolute;
  left: 34px;
  font-size: 30px;
  color: #fff;
  top: calc(50% + 3px);
  transform: translateY(-50%);
}

.img-font {
  position: absolute;
  color: rgb(255, 234, 242);
  left: 86px;
  top: 7px;
  font-size: 14px;
}

.img-time {
  position: absolute;
  color: rgb(255, 234, 242);
  left: 86px;
  top: 25px;
  font-size: 12px;
}

.img-text {
  width: 120px;
  top: 42px;
}

.content-name {
  font-size: 15px;
  margin-bottom: 10px;
}

.content-wrap {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
}

.handpick {
  font-size: 11px;
  background: rgb(167, 127, 213);
  color: #fff;
  border-radius: 2px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  height: 16px;
}

.handpick-font {
  color: rgb(171, 153, 122);
  font-size: 12px;
}

.content-flex {
  display: flex;
  flex-direction: column;
  width: 60%;
}

.content-bottom {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.original {
  font-size: 12px;
  color: rgb(226, 161, 55);
}

.price {
  font-size: 16px;
  font-weight: 700;
}

.content-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.content-but {
  padding: 8px 15px;
  background: rgb(156, 102, 192);
  color: #fff;
  font-size: 12px;
}

.frame {
  min-width: 70px;
  height: 20px;
  border: 1px solid rgb(179, 82, 102);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  position: relative;
}

.frame-flex {
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
}

.frame span {
  color: rgb(179, 82, 102);
  font-size: 12px;
  z-index: 2;
}

.triangle {
  width: 7px;
  height: 7px;
  background: #fff;
  border-bottom: 1px solid rgb(179, 82, 102);
  border-right: 1px solid rgb(179, 82, 102);
  position: absolute;
  bottom: -4px;
  transform: rotate(45deg);
}

.plan {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.plan-wrap {
  width: 120px;
  height: 8px;
  background: rgb(244, 244, 244);
  border-radius: 30px;
  margin-right: 5px;
  position: relative;
}

.plan-back {
  width: 50%;
  height: 100%;
  border-radius: 30px;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to left, rgb(244, 173, 100), rgb(232, 158, 119));
}

.plan span {
  font-size: 12px;
  color: rgb(161, 161, 161);
}
</style>